<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<a href="#/">首页</a>
	<a href="#/about">about</a>

	<div class="routerview">

	</div>

	<script>
		let routerView = [
			{
				path: "/",
				content: "<div>首页</div>"
			}, {
				path: "/about",
				content: "<div>about</div>"
			}
		]

		window.addEventListener('hashchange', () => {
			console.log(location)
			console.log(location.hash)
			if (!location.hash) {
				location.hash = "#/"
			}

			RouterRender(location.hash)

		})
		if (!location.hash) {
			location.hash = "#/"
		}

		RouterRender(location.hash)

		function RouterRender(url) {
			var resContent;
			routerView.forEach((item, i) => {
				if (url == ('#' + item.path)) {
					resContent = item.content;
				}
			})

			let divRouterView = document.querySelector('.routerview');
			divRouterView.innerHTML = resContent;

		}
	</script>
</body>

</html>